<template>
  <div class="projectList">
    <div
      class="projectItem"
      v-for="item in subApplicationList"
      :key="item.id"
      @click="addTab(item)"
    >
      <div class="image">
        <el-image
          style="width: 100px; height: 100px"
          :src="item.image"
          fit="cover"
        />
      </div>
      <div class="info">
        <div class="name">{{ item.name }}</div>
        <div class="description">{{ item.description }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
// import { nanoid } from 'nanoid'
import { useTabStore } from '@/features/store/tabStore'

const router = useRouter()

const { tabList } = storeToRefs(useTabStore())
const { setTagList, setCurrentTabId } = useTabStore()

// 路由跳转
// @ts-ignore
const navigateTo = (path: string) => router.push(path)

interface SubApplicationItem {
  id: string
  path: string
  name: string
  description: string
  image: string
}
const subApplicationList: SubApplicationItem[] = [
  {
    id: 'resourcePool',
    path: '/subApplication/resourcePool',
    name: '资源床',
    description: '上传资源的地方',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    id: 'vueComponent',
    path: '/subApplication/vueComponent',
    name: 'Vue 组件',
    description: '一些自定义的Vue组件',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    id: 'reactComponent',
    path: '/subApplication/reactComponent',
    name: 'React 组件',
    description: '一些自定义的React组件',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    id: 'aiService',
    path: '/subApplication/aiService',
    name: 'AI服务',
    description: '一些探索的AI服务',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
]

// 添加头部标签
const addTab = (tabItem: SubApplicationItem) => {
  navigateTo(tabItem.path)

  const b: boolean = tabList.value.some((item) => item.id === tabItem.id)
  if (b) return setCurrentTabId(tabItem.id)

  const tempList = [tabItem, ...tabList.value]
  setTagList(tempList)
  setCurrentTabId(tabItem.id)
}
</script>

<style lang="less" scoped>
.projectList {
  display: flex;
  flex-wrap: wrap;

  > .projectItem {
    display: flex;
    padding: 10px;
    margin: 10px;
    height: 100px;
    width: 330px;
    transition: 0.5s;
    user-select: none;

    &:hover {
      transition: 0.5s;
      box-shadow: 0 0 1px 2px #e4e4e4;
      border-radius: 3px;
    }

    > .image {
      height: 100px;
      width: 100px;
      margin-right: 10px;
      background-color: #ececec;
    }

    > .info {
      height: 100px;
      width: 220px;

      > .name {
        height: 35px;
        display: flex;
        align-items: center;
        font-size: 17px;
        color: #606266;
        font-weight: bold;
      }

      > .description {
        height: 65px;
        color: #918f8f;
      }
    }
  }
}
</style>
